<template>
  <div id="app">
    <button @click="handleLoginOut">退出登录</button>
    <button @click="handleVisibleToast">显示toast</button>
    <toast />
    <my-head></my-head>
    <my-nav></my-nav>
    <breadcrumb></breadcrumb>
    <router-view />
    <my-foot></my-foot>
    <login-modal></login-modal>
  </div>
</template>

<script>
import MyHead from "@/components/global/MyHead.vue";
import MyNav from "@/components/global/MyNav.vue";
import MyFoot from "@/components/global/MyFoot.vue";
import LoginModal from "@/components/global/LoginModal.vue";
import Breadcrumb from "@/components/global/Breadcrumb.vue";

import * as util from "@/utils/utils";
import * as api from "@/api/api";
import Toast from "@/components/global/Toast.vue";

export default {
  components: {
    MyHead,
    MyNav,
    MyFoot,
    LoginModal,
    Toast,
    Breadcrumb,
  },
  created() {
    console.log(this.$GLOBAL.hellow);
    // 路由初始化完成后的回调方法
    this.$router.onReady(() => {
      let uuid = localStorage.getItem("uuid");
      if (localStorage.getItem("wechatLogin") !== "yes") {
        return;
      }
      const store = this.$store;

      this.$router.push(this.$route.path);

      if (uuid) {
        // 需要绑定手机号
        store.commit("login/modifyUuid", uuid);
        localStorage.removeItem("uuid");
        store.commit("login/showLoginModal", true);
      } else {
        // 手机号已和微信相互绑定 可直接获取用户信息
        localStorage.setItem("token", "12345");
        store.commit("login/modifyLoginState", true);
        util.getUserInfo();
      }
      localStorage.removeItem("wechatLogin");
    });

    api.getOneDayEnglish().then((res) => {
      console.log(`🚀 => api.getOneDayEnglish => res:`, res);
      const { result } = res;
      util.isSizeUseUrl(result.img).then((imgRes) => {
        console.log(`🚀 => util.isSizeUseUrl => imgRes:`, imgRes);
        console.log('@width',imgRes.width)
        console.log('@height', imgRes.height)
      });
    });
  },
  methods: {
    handleLoginOut() {
      localStorage.clear();
      window.location.reload();
    },

    handleVisibleToast() {
      this.$store.dispatch("toast/showToast", {
        text: "warn测试",
        type: "warn",
        duration: 2000,
      });
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
